<template>
  <div class="nav-breadcrumb">
    <el-breadcrumb separator="/">
      <template v-for="breadcrumb in breadcrumbs" :key="breadcrumb.path">
        <el-breadcrumb-item :to="{ path: breadcrumb.path ?? '' }">{{
          breadcrumb.name
        }}</el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import { useStore } from '@/store/index';
import { mapBreadcrumb } from '@/utils/mapBreadcrumb';
import { computed } from 'vue';
const store = useStore();
const route = useRoute();
const menus = store.state.login.menus;
const breadcrumbs = computed(() => mapBreadcrumb(menus, route.path));
</script>

<style scoped></style>
